<template>
	<view>

		<view class="fieldBtn">
			<button @click="triggerVerticalBox"
				style="background-color: #000000; height: 44px; width: 44px; padding: 0"><img src="/static/category.png"
					alt="" width="44"></button>
		</view>

		<view class="VerticalBox">
			<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop"
				v-show="flag" style="height:calc(100vh - 350upx)">
				<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in list"
					style="line-height: 50px" :key="index" @tap="TabSelect" :data-id="index">
					{{item.name}}
				</view>
			</scroll-view>

			<view :class="flag ? 'flex-right' : 'flex-w100' " style="background-color: #fff;">

				<!-- <radio-group name="gender" style="background-color: rgb(212 206 206);display: block;"
					@change="radioChange">
					<label v-for="(item,index) in cabinetList" style="display: block; margin: 4px 5px">
						<radio :value="String(item.cabinnetId)" :checked="item.cabinnetId == cabinetId" />
						<text>{{item.cabinetName}}</text>
					</label>
				</radio-group> -->

				<view class="uni-list">
					<view class="uni-list-cell">
						<!-- <uni-view data-v-4a1c1d28="" class="uni-list-cell-left">当前选择</uni-view> -->
						<view class="uni-list-cell-db">
							<picker mode="selector" @change="bindPickerChange($event, cabinetList)"
								:value="cabinetIndex" :range="cabinetList" :range-key="'cabinetName'" name="">
								<view class="uni-input">
									{{ cabinetList[cabinetIndex] ? cabinetList[cabinetIndex].cabinetName : ''}}<img
										src="/static/arrow-bottom.png" width="18"
										style="float: right; margin-top: 5px" />
								</view>
							</picker>
						</view>
					</view>
				</view>

				<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh - 250upx)"
					:scroll-into-view="'main-'+mainCur" @scroll="VerticalMain">
					<view class="padding-top padding-lr" v-for="(item,index) in list" :key="index" :id="'main-'+index">
						<view class="cu-bar solid-bottom bg-white">
							<view class="action">
								<text class="cuIcon-title text-green"></text> {{item.name}}
							</view>
						</view>
						<view class="cu-list menu-avatar">

							<view class="cu-item ">

								<view class="flex-item"
									style="width: 33.33%;display: inline-block; text-align: center; font-size: .8rem; box-sizing: border-box; padding: 5px; border-bottom: 1px solid #f1f1f1;border-right: 1px solid #f1f1f1;"
									v-for="itemModel in item.list">
									<view class="uni-flex uni-column">
										<view class="flex-item"
											style="display: flex; align-items: center;justify-content: center;height: 100px;"
											@click="addCart(itemModel.sid)">
											<!-- 	<navigator url="/pages/cupboard/card" open-type="switchTab"> -->
											<image class="image" :src="itemModel.piC_LINK" />
											<!-- 	</navigator> -->
										</view>
										<navigator :url="'/pages/cupboard/details?id='+itemModel.sid"
											open-type="navigate">
											<view class="flex-item text-overflow"
												style="height: auto; font-size: .6rem;">
												{{itemModel.brand + '&nbsp;&nbsp;'}} {{itemModel.name}}
											</view>
											<view class="flex-item text-overflow"
												style="height: auto; font-size: .6rem;">
												{{itemModel.spec}}
											</view>
										</navigator>
									</view>
								</view>

							</view>

						</view>
					</view>
				</scroll-view>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				cabinetList: [],
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				load: true,
				cabinetId: 0,
				userEntity: this.StorageCache('user'),
				flag: false,
				cabinetIndex: 0,
			};
		},
		onShow() {

			this.Init()
		},
		onReady() {
			uni.hideLoading()
		},
		methods: {
			Init() {
				this.checkLogin()


				this.cabinetList = []

				uni.request({
					url: this.url+'AppGetCabinetList',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						sid: this.userEntity.orG_SID

					},
					success: (res) => {

						if (res.statusCode == 200) {
							let id = this.StorageCache('id')
							for (let i = 0; i < res.data.length; i++) {
								if (!id && i == 0) {
									id = res.data[i].cabinnetId;
									this.StorageCache('id', id, 28)
								}
								this.cabinetList.push(res.data[i])

								if (id == res.data[i].cabinnetId) {
									this.cabinetIndex = i;
									this.cabinetId = res.data[i].cabinnetId
								}
							}


							uni.request({
								url: this.url+'AppGetClassList',
								header: {
									'content-type': 'application/x-www-form-urlencoded',
								},
								method: 'POST',
								dataType: 'json',
								data: {
									cabinetId: this.StorageCache('id')
								},
								success: (res) => {

									if (res.statusCode == 200) {

										let list = [{}];
										for (let i = 0; i < res.data.length; i++) {

											list[i] = {};
											list[i].name = res.data[i].clasS_NAME;
											list[i].id = res.data[i].sid;
											list[i].list = res.data[i].list
										}
										this.list = list;
										this.listCur = list[0];
									}
								},
								complete: (res) => {

								}
							});




						}
					},
					complete: (res) => {

					}
				});



			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.mainCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							if (data != null) {
								tabHeight = tabHeight + data.height;
							}

							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id

						return false
					}
				}
			},
			radioChange: function(e) {
				//this.cabinetId = e.detail.value
				this.StorageCache('id', e.detail.value, 28)
				location.reload()

			},
			addCart(sid) {

				uni.request({
					url: this.url+'InsertCart',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					dataType: 'json',
					data: {
						userId: this.userEntity.sid,
						cabinetSid: this.cabinetId,
						productSid: sid,
						quantity: 1

					},
					success: (res) => {

						if (res.statusCode == 200 && res.data > 0) {

							uni.showToast({
								title: "添加购物车成功，即将跳转"

							});


							setTimeout(function() {

								uni.reLaunch({
									url: '/pages/cupboard/cart'
								});
								// uni.switchTab({
								// 	url: '/pages/cupboard/cart'
								// })
							}, 1000);


						} else {
							uni.showToast({
								title: "添加购物车失败，请稍后重试"

							});
						}
					},
					complete: (res) => {
					
					}
				});
			},
			triggerVerticalBox() {
				if (this.flag) {
					this.flag = false
				} else {
					this.flag = true
				}
			},
			bindPickerChange: function(e, stronge) {
				this.cabinetIndex = e.target.value;
				this.cabinetId = stronge[e.target.value].cabinnetId;
				this.StorageCache('id', this.cabinetId, 28)
				location.reload()
			},
		}
	}
</script>

<style>
	.action {
		font-size: 16px;
		color: gray;
		margin: 5px;
		text-align: left;
	}

	.cu-item {
		font-size: 16px;
		color: gray;
	}

	.image {

		width: 72px;
		height: 72px;
	}

	.flex-left {
		width: 20%;
		height: 100%;
		text-align: center;
		border: 1px solid #ded4d4;
		margin-top: 30px;
	}

	.flex-right {
		width: 80%;
		height: 100%;
		/* text-align: center; */
		/* border: 1px solid #ded4d4; */

	}
	.flex-w100 {
		width: 100%
	}

	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		/* background-color: #f1f1f1; */
		flex: 1;
	}

	.fieldBtn {
		position: fixed;
		top: 0;
		left: 5px;
		z-index: 999;
	}

	.cu-list>.cu-item>.flex-item:nth-child(-n + 3) {
		border-top: 1px solid #f1f1f1;
	}

	.text-overflow {
		display: block;
		width: 100%;
		word-break: keep-all;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.uni-list:after {
		-webkit-transform: scaleY(1);
		transform: scaleY(1);
		background-color: #f1f1f1;
	}
</style>
